<template>
  <div id="chainShop" :class="{ 'nav-open': NavbarStore.showNavbar }">
    <router-view name="header" />
    <router-view />
    <div class="wxTip" v-if="isShowWxTip">
      <img :src="wxTipImage" alt="在浏览器上打开" />
    </div>
    <router-view name="footer" />
  </div>
</template>
<script>
// import { reHeight } from "@/utils";
import { isWeixin, isPhone, stopBodyMove } from "@/utils";
export default {
  name: "App",
  data() {
    return {
      isShowWxTip: false,
      wxTipImage: require("@/assets/images/mobile/wxTip.png"),
    };
  },
  created() {
    //在页面加载时读取sessionStorage里的状态信息
    if (sessionStorage.getItem("store")) {
      this.$store.replaceState(
        Object.assign(
          {},
          this.$store.state,
          JSON.parse(sessionStorage.getItem("store"))
        )
      );
    }

    //在页面刷新时将vuex里的信息保存到sessionStorage里
    window.addEventListener("beforeunload", () => {
      sessionStorage.setItem("store", JSON.stringify(this.$store.state));
    });

    if (
      decodeURIComponent(window.location.href).indexOf("?m=") !== -1 &&
      isWeixin() &&
      isPhone()
    ) {
      this.isShowWxTip = true;
      stopBodyMove();
    }
  },
  mounted() {
    // reHeight("chainShop", this);
    // Message({
    //   message: "警告!",
    //   iconClass: "myWarningIcon",
    //   customClass: "myWarning",
    // });
    // Message({
    //   message: "错误!",
    //   iconClass: "myErrorIcon",
    //   customClass: "myError",
    // });
    // Message({
    //   message: "成功!",
    //   iconClass: "mySuccessIcon",
    //   customClass: "mySuccess",
    // });
  },
};
</script>
<style lang="less">
html,
body {
  padding: 0;
  margin: 0;
  padding: 0 !important;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

/* 设置滚动条的样式 */
::-webkit-scrollbar {
  width: 6px;
  border-radius: 3px;
  display: none;
}

/* 滚动槽 */
::-webkit-scrollbar-track {
  border-radius: 10px;
}

/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: #a0a0a0;
  height: 105px;
}

.el-select-dropdown,
.el-select__caret {
  display: none !important;
}

::-webkit-scrollbar {
  width: 0px;
  height: 5px;
}

::-webkit-scrollbar-track-piece {
  background-color: rgba(0, 0, 0, 0.2);
  -webkit-border-radius: 6px;
}

::-webkit-scrollbar-thumb:vertical {
  height: 5px;
  background-color: rgba(125, 125, 125, 0.7);
  -webkit-border-radius: 6px;
}

::-webkit-scrollbar-thumb:horizontal {
  width: 5px;
  background-color: rgba(125, 125, 125, 0.7);
  -webkit-border-radius: 6px;
}

#chainShop {
  min-height: 100vh;
  min-height: -webkit-fill-available;
  position: relative;
  background-color: #171818;
  // height: 100%;
  // overflow-y: scroll;
}

#chanShop::-webkit-scrollbar {
  display: none;
}

@media screen and (max-width: 768px) {
  html,
  body {
    background-color: #1e2020 !important;
  }

  #chainShop {
    background-color: #1e2020 !important;

    .wxTip {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: #000000;
      opacity: 0.8;
      z-index: 999999;

      img {
        width: 562px;
        position: absolute;
        top: 10px;
        right: 7%;
      }
    }
  }
}

// ----- vant toast ------
// >> 默认
.van-toast {
  width: 320px !important;
  height: 88px !important;
  background: rgba(0, 0, 0, 0.8);
  border-radius: 10px !important;
  padding: 0;
  z-index: 999999 !important;

  .van-toast__text {
    font-size: 28px !important;
    font-family: PingFangSC-Regular, PingFang SC !important;
    font-weight: 400 !important;
    line-height: 40px !important;
    color: #ffffff !important;
  }
}

// >> 加载中、认证成功提示（正方形）
.van-toast.loading_style,
.van-toast.authentication_ok {
  width: 160px !important;
  height: 160px !important;
  border-radius: 5px !important;

  .van-toast__text {
    line-height: 28px !important;
  }
}

// >> 已认证提示
.van-toast.authentication_already {
  width: 180px !important;
  height: 88px !important;
  border-radius: 10px !important;
}

// >> 取消点赞和收藏提示
.van-toast.cancelMine {
  width: 252px !important;
  height: 108px !important;
  background: #2c2c2e !important;
  border-radius: 54px !important;
  top: 4vh;
}

// >> 发送短信验证码
.van-toast.getCode {
  width: 208px !important;
  height: 88px !important;
  border-radius: 10px !important;
  top: 358px;
}

.myErrorIcon {
  background: url("~@/assets/images/icons/error.png");
  width: 14px;
  height: 14px;
  background-size: cover;
  margin-right: 13px;
}

.mySuccessIcon {
  background: url("~@/assets/images/icons/success.png");
  width: 14px;
  height: 14px;
  background-size: cover;
  margin-right: 13px;
}

.myWarningIcon {
  background: url("~@/assets/images/icons/warning.png");
  width: 14px;
  height: 14px;
  background-size: cover;
  margin-right: 13px;
}

.myErrorIcon:before,
.mySuccessIcon:before,
.myWarningIcon:before {
  content: "";
  font-size: 14px;
  visibility: hidden;
}

.myError {
  background-color: #ff5252 !important;
  border: none !important;
  box-shadow: 0px 12px 37px 11px rgba(0, 0, 0, 0.05),
    0px 8px 21px 0px rgba(0, 0, 0, 0.08), 0px 4px 8px -5px rgba(0, 0, 0, 0.12);
  border-radius: 3px;

  p {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #ffffff;
    line-height: 14px;
  }
}

.mySuccess {
  background-color: #07ae56 !important;
  border: none !important;
  box-shadow: 0px 12px 37px 11px rgba(0, 0, 0, 0.05),
    0px 8px 21px 0px rgba(0, 0, 0, 0.08), 0px 4px 8px -5px rgba(0, 0, 0, 0.12);
  border-radius: 3px;

  p {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #ffffff;
    line-height: 14px;
  }
}

.myWarning {
  background-color: #fe8319 !important;
  border: none !important;
  box-shadow: 0px 12px 37px 11px rgba(0, 0, 0, 0.05),
    0px 8px 21px 0px rgba(0, 0, 0, 0.08), 0px 4px 8px -5px rgba(0, 0, 0, 0.12);
  border-radius: 3px;

  p {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #ffffff;
    line-height: 14px;
  }
}
</style>
